<template>
  <div id="lesson-comment">
    <!-- 总评分开始 -->
    <div class="score-summary">
      <div class="score">4.3</div>
      <div class="score-star">
        <div class="star">
          <el-rate
            :value="4.3"
            disabled
            text-color="#ff9900"
          >
          </el-rate>
        </div>
        <div class="comment-num">123条评论</div>
      </div>
    </div>
    <!-- 总评分结束 -->
    <!-- 评论内容开始 -->
    <div class="comments">
        <div class="item" style="margin:40px 0;" v-for="i of 10" :key="i">
            <comment-item/>
        </div>
    </div>
    <!-- 评论内容结束  -->
  </div>
</template>

<script>
import CommentItem from '../comment/CommentItem.vue';
export default {
  components: { CommentItem },};
</script>

<style scoped>
#lesson-comment .score-summary{
    display: flex;
    display: -webkit-flex;
    justify-content: start;
    align-items: center;
    margin: 40px 0 ;
}

#lesson-comment .score-summary .score{
    font-size: 40px;
    line-height: 60px;
    color: red;
    font-weight: bolder;
    margin: 0 20px;
}

#lesson-comment .score-summary  .score-star .comment-num{
    color: gray;
    font-size: 12px;
}


</style>